<template>
	<div class="order-container">
		<!-- 顶部选项卡 -->
		<div class="tab-container">
			<div v-for="(tab, index) in tabs" :key="index" class="tab-item"
				:class="{ active: query.audit === tab.value }" @click="switchTab(tab.value)">
				{{ tab.name }}
			</div>
		</div>

		<!-- 订单列表 -->
		<div class="order-list">
			<!-- 时代灯饰订单 -->
			<div class="order-item" v-for="item in orderList" :key="item.id">
				<div class="order-header">
					<div class="store-info">
						<img src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-06/1746528989179.png"
							style="width: 120rpx; height: 120rpx;object-fit: cover;border-radius: 50%;"
							mode="fill"></img>
					</div>
					<div style="flex: 1;">
						<div class="store-box">
							<div class="store-name">{{ `${item.user_name}(${item.master_name})` || '' }}</div>
							<div class="store-next">
								<view :style="{ color: getStatusName(item.audit).color }">
									{{ getStatusName(item.audit).name }}</view>
							</div>
						</div>
						<div class="store-label">
							<div>{{ item.master_mobile || "" }}</div>
						</div>
					</div>
				</div>

				<!-- 订单总结 -->
				<div class="order-footer">
					<div class="order-actions">
                        <button class="action-btn" @click="sendStoreOpen(item,'discount')" v-if="item.audit === 2">
							设置折扣
						</button>
						<button class="action-btn" @click="sendStoreOpen(item, 'view')">
							查看详情
						</button>
						<button class="action-btn" @click="sendStoreOpen(item, 'audit')"
							v-if="item.audit === 1">
							审核
						</button>
					</div>
				</div>
			</div>
			<div v-if="orderList.length === 0" class="empty-order">
				<gui-image
					src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"></gui-image>
				<div style="font-size: 28rpx; color: #999; margin-top: -20rpx">
					暂无数据~
				</div>
			</div>
		</div>


		<gui-modal ref="setPopup" title="师傅设置" isCloseBtn titleStyle="line-height:100rpx; font-size:40rpx;color:white;">
			<view class="gui-radio-lable" slot="content">
				<view style="min-height: 140rpx;">
					<span class="set-item" >师傅折扣：<input type="digit"
							v-model="sendInfo.discount" placeholder="请输入折扣 0 - 1" /></span>
				</view>
			</view>
			<view slot="btns" class="gui-flex gui-align-items-center gui-justify-content-center  gui-border-t height">
				<button class="gui-btn cancel" @click="cancel">取消</button>
				<button class="gui-btn success" @click="sendGoods">确定</button>
			</view>
		</gui-modal>
	</div>
</template>

<script setup>
import {
	ref,
	reactive
} from "vue";
import {
	getMasterList as getOrderList,
	saveMasterDiscount as saveDiscount,
} from "@/apiShop/master";
import {
	onShow,
	onShareAppMessage
} from "@dcloudio/uni-app";
import {
	bc,
	showToast
} from "@/utils/helper";
// 选项卡数据
const tabs = [
	{
		name: "全部",
		value: 0,
		class: "all",
	},
	{
		name: "待审核",
		value: 1,
		class: "nopay",
	},
	{
		name: "审核通过",
		value: 2,
		class: "waitSend",
	},
	{
		name: "审核不通过",
		value: 3,
		class: "waitReceive",
	},
];

const sendInfo = reactive({
	id: undefined,
	discount: undefined,
});
const query = reactive({
	page: 1,
	limit: 99,
	audit: 0,
});
// 切换选项卡
const switchTab = (value) => {
	query.audit = value;
	getOrderListData();
};
const orderList = ref([]);
const getOrderListData = async () => {
	const {
		data
	} = await getOrderList(query);
	orderList.value = data;
};
const setPopup = ref(null);
const typeAction = ref(null);
const sendStoreOpen = (item, type) => {
	typeAction.value = type;
	switch (type) {
		case 'discount':
		sendInfo.id = item.id;
		sendInfo.discount = item.discount || undefined
		setPopup.value.open();
			break;
		case 'view':
			uni.navigateTo({
				url: `/pagesShop/master/auditMasterInfo?id=${item.id}&&action=view`
			});
			break;
		case 'audit':
			uni.navigateTo({
				url: `/pagesShop/master/auditMasterInfo?id=${item.id}&&action=audit`
			});
			break;
	}
};

const cancel = () => {
	Object.assign(sendInfo, {
		id: undefined,
		discount: undefined,
	})
	setPopup.value.close();
}

const sendGoods = async () => {
	switch (typeAction.value) {
		case 'discount':
			await saveDiscount({
				id: sendInfo.id,
				discount: sendInfo.discount,
			});
			break;
	}
	showToast('设置成功');
	cancel();
};

const getStatusName = (status) => {
	switch (status) {
		case 1:
			return {
				color: '#3399ff',
				name: '待审核'
			};
		case 2:
			return {
				color: '#7cbc18',
				name: '审核通过'
			};
		case 3:
			return {
				color: '#ff4d4f',
				name: '审核不通过'
			};
		default:
			return {
				color: '#ff1111',
				name: '未知'
			};
	}
}
onShow(() => {
	getOrderListData();
});
</script>

<style scoped>
.order-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 选项卡样式 */
.tab-container {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 10;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 24rpx 0;
	font-size: 28rpx;
	color: #333;
	position: relative;
	white-space: nowrap;
}

.tab-item.active {
	color: #1989fa;
}

.tab-item.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #1989fa;
}

/* 订单列表样式 */
.order-list {
	padding: 20rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.order-header {
	display: flex;
	gap: 20rpx;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1px solid #f5f5f5;
}

.store-info {
	display: flex;
	align-items: center;
}

.store-icon {
	margin-right: 10rpx;
	font-size: 32rpx;
}

.store-name {
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.store-label {
	font-size: 28rpx;
	color: #858585;
	display: flex;
	gap: 20rpx;
}

.store-next {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.order-status {
	font-size: 24rpx;
}

/* 商品列表样式 */
.product-list {
	padding: 0 20rpx;
}

.product-item {
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.product-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
}

.product-quantity {
	font-size: 28rpx;
	color: #999;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.product-price {
	font-size: 28rpx;
	color: #ff4d4f;
}

/* 订单底部样式 */
.order-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 20rpx;
}

.order-total {
	font-size: 26rpx;
	color: #333;
	text-align: right;
}

.order-actions {
	display: flex;
}

.action-btn {
	margin-left: 20rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	border: 1px solid #6cb4fe;
	background-color: #fff;
	color: #409eff;
	border-color: #409eff;
}

.share-btn {
	color: #409eff;
	border-color: #409eff;
}

.cancel-btn {
	color: #666;
}


.ship-btn {
	color: #409eff;
	border-color: #409eff;
}

.send-container {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 10rpx;
	border-bottom: 1px solid #fff;
}

.send-label {
	position: relative;
	top: -4px;
}

.color {
	background-image: linear-gradient(45deg, #abda75, #008aff) !important;
}

.empty-order {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80vh;
	flex-direction: column;
}

.set-item {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10rpx;
}

.cancel {
	padding: 10rpx;
	flex: 1;
	background-color: #fff;
	color: #333;
}

.success {
	flex: 1;
	padding: 10rpx;
	background-color: #fff;
	color: #3399ff;
}

.store-box {
	display: flex;
	justify-content: space-between;
}
</style>